<template>
  <div id="table">
    <el-table :data="tableData.row" border :show-header="showHeader">
      <el-table-column align="center" v-if="selection" type="selection" />
      <el-table-column
        v-for="(item, index) in tableData.col"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || ''"
      >
        <!-- 根据业务增添自定义表格 -->
        <template slot-scope="scope">
          <!-- 默认显示数据 -->
          <span v-if="!item.type">{{ scope.row[item.prop] || 'Null' }}</span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :total="tableData.row.length" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },

  props: {
    tableData: {
      type: Object,
      default: () => {}
    },
    selection: {
      type: Boolean,
      default: false
    },
    showHeader: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      selectValue: ''
    }
  },

  methods: {
    handleClick(row) {
      this.$emit('btnClick', row)
    }
  }
}
</script>
